目標

今天是 LocalStorage and Event Delegation 的上篇

我們要來學習的是Local Storage

Step1

const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const items = [];

function addItem(e) {
    e.preventDefault();
}

addItems.addEventListener('submit', addItem)

首先，今天要監聽的事件是submit(提交)，當我們按下enter或是按下提交按鈕，瀏覽器都會執行提交動作

接下來，每當我們進行提交的時候，瀏覽器都會重新導向一次，所以使用preventDefault()來取消預設動作

Event.preventDefault()

preventDefault()告訴user agent，如果此事件沒有被顯式處理，它默認的動作也不應該照常執行，此事件還是繼續傳遞，除非碰到事件監聽器調用stopPropagation() 或stopImmediatePropagation()，才停止傳遞

function addItem(e) {
    e.preventDefault();
		const text = (this.querySelector('[name=item]')).value;
    const item = {
        text,
        done: false
    };
    items.push(item);
    this.reset();
}

然後是建立要新增的物件，這裡可以使用ES6的物件縮寫(Object Shorthand)

物件縮寫 Object Shorthand

原本的寫法：

const item = {
    text: text,
    done: false
};

使用物件縮寫：

const item = {
    text,
    done: false
};

而取得輸入字串時使用的this，可以幫助縮小querySelector()搜尋的範圍

最後再以reset()重置表單輸入的內容

HTMLFormElement.reset()

reset() 可以重置一個表單內的所有表單元件的值到初始狀態

Step2

接下來要做的是在畫面上插入新增的項目

function populateList(plates = [], plateList) {
    plateList.innerHTML = plates.map((plate, i) => {
        return `
            <li>
                <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? "checked" : ""} />
                <label for="item${i}">${plate.text}</label>
            </li>
        `;
    }).join('');
}

這邊建立一個function，要傳入兩個參數：

• plates: 儲存所有項目的陣列
• plateList: 插入列表的位置

這個function要在HTML插入一個大字串來顯示列表，所以這邊使用innerHTML，來設置HTML

element.innerHTML

Element 的innerHTML屬性可以獲取或設置元素中包含的HTML或XML標記，，也可以單純的將字串寫入 HTML Code 的某一個部分

最後，map()會回傳一個陣列，所以要用join()來將陣列整合成字串，然後再加到前面的function執行

function addItem(e) {
		//...接續上方程式
    populateList(items, itemsList);
}

Extra

.plates input {
  display: none;
}
.plates input + label:before {
  content: "⬜️";
  margin-right: 10px;
}

.plates input:checked + label:before {
  content: "?";
}

本練習的原作者在列表上加了一點小巧思，當checkbox未被勾選時，它會有一個空白的icon，勾選後會變成一個墨西哥捲餅，這邊有興趣的人也可以試試

表單的 label

當使用傳統的 HTML 表單元素建立表單時，提供控制用的標籤（label）以及將標籤與對應表單元素建立關聯是非常重要的，當 screen reader （例如瀏覽器、電子郵件……等等）瀏覽一個頁面時，screen reader 會顯示 form controls ，但若沒有標示 control 和 label 之間的關聯， screen reader 沒法知道哪個 label 是對應哪個 control

Step3

最後我們要進入本日的重點—localStorage

const items = JSON.parse(localStorage.getItem('items')) || [];

function addItem(e) {
		//...接續上方程式
    localStorage.setItem('items', JSON.stringify(items));
    this.reset();
}

在這邊實作的部分，首先要取得localStorage的內容，如果不存在，則建立一個空陣列；在更新資料陣列後，將localStorage更新

Storage

Web Storage API 中的 Storage 介面提供了存取特定 domain session 及本機儲存的方法，它能夠對存取的資料進行新增、刪除、修改，在操作上，如果是對象是 domain session storage ，會呼叫 Window.sessionStorage；而若是 local storage，則呼叫 Window.localStorage

方法

• Storage.key()

  當傳入一數字 n，會返回 storage 裡第 n 個值的 key 值

• Storage.getItem()
  當傳入一 key 值,，會返回 storage 裡此 key 值對應的 value

• Storage.setItem()

  當傳入 key 及 value 的值，會在 storage 裡新增此 key 及 value 值，若 key 已存在，則會把值更新成傳入的 value

• Storage.removeItem()

  當傳入一 key 值,，會把此 key 從 storage 裡刪除

• Storage.clear()

  執行此方法，會刪除所有在 storage 裡的 key

Window.localStorage

localStorage 為一唯讀屬性,，此屬性允許存取目前文件(Document)隸屬網域來源的 Storage 物件，其儲存資料的可存取範圍為跨瀏覽頁狀態(Browser Sessions)，localStorage 的儲存資料並無到期的限制

Window.sessionStorage

sessionStorage 為一唯讀屬性，此屬性能允許存取當前來源的 Storage 物件，存放在 sessionStorage 的資料則會在頁面 session 結束時清空，只要頁面(頁籤)沒被關閉或者還原(restore)，資料就會保存，開啟新頁籤或視窗會產生一個新的sessionStorage